<script setup>
import { getGoodsListAPI, deleteGoodsAPI, updateGoodsStatusAPI } from '@/api/Goods.js';
import { useUserStore } from "@/stores/user";
import { ref } from "vue";
import { ElMessage, ElMessageBox} from "element-plus";
import { useRouter } from 'vue-router'
const router = useRouter();

const userStore = useUserStore();
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  name: '',
  userId: userStore.UserId,
  type: 1,
});
const goodsList = ref([]);
const total = ref(0);

const getGoodsList = async () => {
  const res = await getGoodsListAPI(queryParams.value);
  goodsList.value = res.data.data.rows;
  total.value = res.data.data.total;
};

const handleDelete = (goodsId) => {
  ElMessageBox.confirm('此操作将永久删除该商品, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await deleteGoodsAPI(goodsId);
    if (res.data.code === 200) {
      ElMessage.success('删除成功!');
      await getGoodsList();
    }
  }).catch(() => {});
};

const handleStatus = (goodsId, status) => {
  updateGoodsStatusAPI(goodsId, status).then(res => {
    if (res.data.code === 200) {
      ElMessage.success('状态修改成功');
      getGoodsList();
    } else {
      ElMessage.error('状态修改失败');
    }
  });
};

// Fetch goods list on component mount
getGoodsList();

const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getGoodsList();
};

const handlePageChange = (page) => {
  queryParams.value.pageNum = page;
  getGoodsList();
};

const switchType = (type) => {
  queryParams.value.type = type;
  queryParams.value.pageNum = 1;
  getGoodsList();
};
const handleAdd = () => {
  router.push('/myInfo/publish-product');
}
</script>

<template>
  <div>
    <!-- Top Menu for Goods Type Selection -->
    <el-menu :default-active="queryParams.type.toString()" mode="horizontal" @select="switchType">
      <el-menu-item index="1">新品</el-menu-item>
      <el-menu-item index="2">二手</el-menu-item>
      <el-button type="primary" style="margin-left: 300px; margin-top: 20px;" @click="handleAdd">新增商品</el-button>

    </el-menu>

    <!-- Search and Filter Section -->
    <div style="display: flex; margin-left: 100px; margin-top: 20px;">
      <el-input v-model="queryParams.name" placeholder="搜索商品" @keyup.enter="handleSearch" style="width: 300px;" />
      <el-button @click="handleSearch" type="primary" style="margin-left: 10px;background-color: #30d104;">搜索</el-button>
    </div>

    <!-- Goods List Section -->
    <el-table :data="goodsList" style="width:980px; margin-top: 20px;margin-left: -100px">
      <el-table-column prop="image" label="商品图片" width="120">
        <template #default="scope">
          <img :src="scope.row.image" alt="商品图片" style="width: 100px; height: auto;" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" />
      <el-table-column  prop="price" label="价格" />
      <el-table-column prop="nums" label="库存" />
      <el-table-column label="描述" width="200">
        <template #default="scope">
          <div style="font-size: 12px;" v-html="scope.row.description"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
          <el-button @click="handleStatus(scope.row.id, scope.row.status === 1 ? 0 : 1)" :type="scope.row.status === 1 ? 'warning' : 'success'" size="small">
            {{ scope.row.status === 1 ? '下架' : '上架' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="queryParams.pageSize"
        :total="total"
        @current-change="handlePageChange"
        style="margin-top: 20px; text-align: center;margin-left: 150px;"
    />
  </div>
</template>

<style scoped>
/* Custom styling for table and pagination */
</style>
